1
|
|
|
/** |
2
|
|
|
* This file is part of the O2System Venus UI Framework package. |
3
|
|
|
* |
4
|
|
|
* For the full copyright and license information, please view the LICENSE |
5
|
|
|
* file that was distributed with this source code. |
6
|
|
|
* |
7
|
|
|
* @author Steeve Andrian Salim |
8
|
|
|
* @copyright Copyright (c) Steeve Andrian Salim |
9
|
|
|
*/ |
10
|
|
|
// ------------------------------------------------------------------------ |
11
|
|
|
|
12
|
|
|
import * as $ from 'jquery'; |
13
|
|
|
import * as Dropzone from 'dropzone'; |
14
|
|
|
import 'dropify/dist/js/dropify' |
15
|
|
|
/** |
16
|
|
|
* Class Upload |
17
|
|
|
* |
18
|
|
|
* @author Teguh Rianto |
19
|
|
|
* @package Components |
20
|
|
|
*/ |
21
|
|
|
|
22
|
|
|
export default class Upload { |
23
|
|
|
constructor() { |
24
|
|
|
/** |
25
|
|
|
* Init dropzone |
26
|
|
|
*/ |
27
|
|
|
this.initDropzone(); |
28
|
|
|
|
29
|
|
|
/** |
30
|
|
|
* Init dropify |
31
|
|
|
*/ |
32
|
|
|
this.initDropify(); |
33
|
|
|
} |
34
|
|
|
|
35
|
|
|
initDropzone() { |
36
|
|
|
if (typeof Dropzone != 'undefined') { |
37
|
|
|
var urlAction = $('[name="dropzone-url"]').val(); |
38
|
|
|
|
39
|
|
|
var previewNode = $('#dropzone-preview'); |
40
|
|
|
previewNode.removeAttr('id'); |
41
|
|
|
var previewTemplate = previewNode.parent().html(); |
42
|
|
|
previewNode.parent().remove(); |
43
|
|
|
|
44
|
|
|
var mediaDropzone = $(".dropzone-form").dropzone({ |
45
|
|
|
url: urlAction, |
46
|
|
|
autoProcessQueue: true, |
47
|
|
|
thumbnailWidth: null, |
48
|
|
|
thumbnailHeight: null, |
49
|
|
|
previewTemplate: previewTemplate, // Define the container to display the previews |
50
|
|
|
//clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files. |
51
|
|
|
}); |
52
|
|
|
|
53
|
|
View Code Duplication |
mediaDropzone.on("addedfile", function (file) { |
|
|
|
|
54
|
|
|
var fileId = 'media' + document.querySelectorAll('.media-list-item').length; |
55
|
|
|
file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId); |
56
|
|
|
file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId); |
57
|
|
|
|
58
|
|
|
var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif']; |
59
|
|
|
if (imagesFileTypes.indexOf(file.type) != -1) { |
60
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'none'; |
61
|
|
|
} else if (file.type === 'application/pdf') { |
62
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
63
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>'; |
64
|
|
|
} else if (file.type === 'application/doc' | 'application/docx') { |
|
|
|
|
65
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
66
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>'; |
67
|
|
|
} else if (file.type === 'application/ppt' | 'application/pptx') { |
68
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
69
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>'; |
70
|
|
|
} else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') { |
71
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
72
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>'; |
73
|
|
|
} else if (file.type === 'audio/mpeg') { |
74
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
75
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>'; |
76
|
|
|
} else { |
77
|
|
|
file.previewElement.querySelector('.media-item-file-details').style.display = 'block'; |
78
|
|
|
file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>'; |
79
|
|
|
} |
80
|
|
|
}); |
81
|
|
|
|
82
|
|
|
mediaDropzone.on("success", function (file, resp) { |
|
|
|
|
83
|
|
|
file.previewElement.querySelector(".media-list-item").classList.remove('uploading'); |
84
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
85
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
86
|
|
|
}); |
87
|
|
|
|
88
|
|
|
mediaDropzone.on("error", function (file) { |
89
|
|
|
file.previewElement.querySelector(".media-list-item").classList.remove('uploading'); |
90
|
|
|
file.previewElement.querySelector(".upload-progress").style.display = 'none'; |
91
|
|
|
file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type; |
92
|
|
|
}); |
93
|
|
|
} |
94
|
|
|
} |
95
|
|
|
|
96
|
|
|
initDropify(){ |
97
|
|
|
$('.dropify').dropify(); |
98
|
|
|
} |
99
|
|
|
} |